import React, { useState } from "react";
import "./Focus.css";

import { useEffect } from "react";

export default function Focus() {
	//创建状态
	let [id, setId] = useState(1);

	//下一张图片
	let next = () => {
		if (id <= 5) {
			setId(id++);
		} else {
			setId(1);
		}
	};

	//上一张图片
	let prev = () => {
		if (id >= 1) {
			setId(id--);
		} else {
			setId(5);
		}
	};

	let off = null;

	let offTime = () => {
		clearInterval(off);
	};

	useEffect(() => {
		let time = setInterval(() => {
			console.log("启动");
			next();
		}, 1000);
		off = time;
		return () => {
			clearInterval(time);
		};
	}, [id]);

	return (
		<div className="focus" onMouseOver={offTime}>
			<img src={`/img/${id}.jpg`} alt="" />
			<div className="prev btn" onClick={prev}>
				&lt;
			</div>
			<div className="next btn" onClick={next}>
				&gt;
			</div>
		</div>
	);
}
